<template>
  <div id="home">
    <div class="home-title">欢迎登录永川标注人才系统</div>
    <div class="home-content">
      <img class="home-img" src="@/assets/img/welcome.png" alt="" />
      <div class="home-infos">
        <div class="home-info">
          <div class="home-info-symbol"><SvgIcon name="duigou" /></div>
          <div class="home-info-text">
            java版本：{{ systemInfo.javaVersion }}
          </div>
        </div>
        <div class="home-info">
          <div class="home-info-symbol"><SvgIcon name="duigou" /></div>
          <div class="home-info-text">
            nginx版本：{{ systemInfo.nginxVersion }}
          </div>
        </div>
        <div class="home-info">
          <div class="home-info-symbol"><SvgIcon name="duigou" /></div>
          <div class="home-info-text">
            当前时间：{{ systemInfo.serverTime }}
          </div>
        </div>
      </div>
    </div>
    <div class="home-progress">
      <div class="home-progress-value"></div>
    </div>
  </div>
</template>

<script>
import { getSystemInfo } from 'services/common'
export default {
  name: 'Home',
  data() {
    return {
      systemInfo: {}
    }
  },
  methods: {
    async getSystemInfo() {
      this.systemInfo = await getSystemInfo()
    }
  },
  created() {
    this.getSystemInfo()
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
#home {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  .home-title {
    margin-top: 2.23rem;
    font-size: 48px;
    font-weight: bold;
    color: $colorText1;
    text-align: center;
  }
  .home-content {
    margin-top: 0.93rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .home-img {
      margin-right: 1.08rem;
    }
    .home-info {
      margin-bottom: 0.63rem;
      display: flex;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
      }
      .home-info-symbol {
        @include circle(22px);
        background-color: #31b172;
        color: #fff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 21px;
      }
      .home-info-text {
        font-size: 20px;
        color: $colorText2;
      }
    }
  }
  .home-progress {
    margin: 0.9rem auto 0;
    width: 427px;
    height: 5px;
    background: #dedede;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    .home-progress-value {
      width: 67px;
      height: 5px;
      background: #5c7cfa;
      border-radius: 3px;
    }
  }
}
</style>
